<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <input type="button" value="点我切换类名" @click="one" :class="oneclass" />
    </div>
    <div>
      <p>第二题</p>
      <p :class="{ 'text-center': iscenter, 'text-color': isred }" @click="ttt">点我切换颜色</p>
    </div>
    <div>
      <p>第三题</p>
      <ul>
        <li
          v-for="(item, index) in threeArr"
          :key="index"
          :class="[{ hovered: item.hovered }, 'list-item']"
          @mousemove="item.hovered = true"
          @mouseleave="item.hovered = false"
        >
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

//第一题
let oneclass = ref('btn')
function one() {
  if (oneclass.value === 'btn') {
    oneclass.value = 'btn-active'
  } else {
    oneclass.value = 'btn'
  }
}
//第二题
let iscenter = ref(true)
let isred = ref(true)
function ttt() {
  isred.value = !isred.value
}
//第三题
let threeArr = reactive([
  { text: '第一项', hovered: false },
  { text: '第二项', hovered: false },
  { text: '第三项', hovered: false },
])
</script>

<style scoped>
.text-color {
  color: red;
}
</style>
